<template>
  <view class="page">
    
    <!-- 
     默认颜色使用主色，可通过color、disColor设置
     -->
    
    <!-- 基本使用 -->
    <vf-sms :status="status1" @sendsms="sendsms(1)"></vf-sms>
    
    <!-- 设置倒计时间 -->
    <vf-sms :status="status2" @sendsms="sendsms(2)" :time="6"></vf-sms>
    
    <!-- 设置颜色 -->
    <vf-sms :status="status3" @sendsms="sendsms(3)" color="orange" disColor="#333"></vf-sms>
    
    <!-- 设置文字 -->
    <vf-sms :status="status4" @sendsms="sendsms(4)" :time="6" :text="text"></vf-sms>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status1: 0,
      status2: 0,
      status3: 0,
      status4: 0,
      text: '发送验证码'
    }
  },
  methods: {
    sendsms(t) {
      this['status' + t] = 1;
      setTimeout(() => {
        this['status' + t] = 2;
        if(t === 4) {
          this.text = '再次发送';
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  @include page;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>
